<template>
  <div class="formbox">
    <h2>新增租赁信息</h2>
    <div class="form">
      <ul>
        <li>
          <p>房屋号</p> 
          <span
            ><select name="homeID" id="" style="width:100%;margin-top:4px" >
              <option value="A栋-1102" v-model="homeNum">A栋-1101</option>
              <option value="A栋-1102" v-model="homeNum">A栋-1102</option>
              <option value="A栋-1102" v-model="homeNum">A栋-1103</option>
              <option value="A栋-1102" v-model="homeNum">A栋-1104</option>
              <option value="A栋-1102" v-model="homeNum">A栋-1105</option>
              <option value="A栋-1102" v-model="homeNum">A栋-1106</option>
            </select></span
          >
        </li>
        <li><p>月租费用</p><span><input type="text" v-model="price"></span></li>
        <li><p>租赁人</p><span><input type="text" v-model="user"></span></li>
        <li><p>联系电话</p><span><input type="text" v-model="phone"></span></li>
        <li><p>用水量(吨)</p><span><input type="text" v-model="water"></span></li>
        <li><p>单价(元)</p><span><input type="text" v-model="waterprice"></span></li>
        <li><p>水费(元)</p><span class="num">{{waterTotal}}</span></li>
        <li><p>电表初始读数</p><span><input type="text" v-model="powerstart"></span></li>
        <li><p>电表月底读数</p><span><input type="text" v-model="powerend"></span></li>
        <li><p>用电量(度)</p><span class="num">{{usePower}}</span></li>
        <li><p>电费单价</p><span><input type="text" v-model="powerprice"></span></li>
        <li><p>电费(元)</p><span class="num">{{powerTotal}}</span></li>
        <li><p>租赁面积(平米)</p><span><input type="text" v-model="area"></span></li>
        <li><p>单价(平米)</p><span><input type="text" v-model="areaprice"></span></li>
        <li><p>物业费(元)</p><span class="num">{{areaTotal}}</span></li>
        <li><p>租金合计(元)</p><span class="num">{{total | fmtTotal}}</span></li>
      </ul>
      <div><button @click="saveInfo">保存</button></div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
export default {
  data(){
    return{
      // 房号
      homeNum:'A栋-1101',
      // 月租费用
      price:0,
      // 租赁人
      user:'',
      // 联系电话
      phone:'',
      // 用水量
      water:0,
      // 单价
      waterprice:2.5,
      // 电表初始
      powerstart:0,
      // 电表末
      powerend:0,
      // 电表单价
      powerprice:0.85,
      // 租赁面积
      area:0,
      // 面积单价
      areaprice:3

    }
  },

  computed:{
      waterTotal(){
        return this.water * this.waterprice
      },
      usePower(){
        return this.powerend - this.powerstart
      },
      powerTotal(){
        return (this.powerend - this.powerstart) * this.powerprice
      },
      areaTotal(){
        return this.area * this.areaprice
      },

      total(){
        return +this.price + +this.water * +this.waterprice + +this.powerprice * (+this.powerend - +this.powerstart) + +this.area * +this.areaprice
      }
  },
  methods:{
    ...mapMutations({
      addRentInfo:'rentInfo/addRentInfo'
    }),
    saveInfo(){
      this.addRentInfo({
        No:this.homeNum,
        price:+this.price,
        user:this.user,
        phone:+this.phone,
        water:+this.water,
        waterprice:+this.waterprice,
        powerstart:+this.powerstart,
        powerend:+this.powerend,
        powerprice:+this.powerprice,
        area:+this.area,
        areaprice:+this.areaprice
      })

      this.$router.push("/home/list")
    }
  },
  filters:{
    fmtTotal(val){
      console.log(val);
      return parseFloat(val).toFixed(2)  
    }
  }
};
</script>

<style lang="less" scoped>
.formbox {
  padding: 10px;
  h2 {
    background-color: #505960;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
  }
  .form {
    border: 1px solid #000;
    margin-top: 10px;
    text-align: center;
    ul {
        width: 300px;
        margin: 0 auto;
      li {
        margin: 10px;
        height: 25px;
        font-size: 14px;
        color: rgb(79, 78, 78);
        line-height: 25px;
        span{
            display: flex;
            text-align: right;
        }
        p{
            width: 100px;
            text-align: right;
            float: left;
            margin-right: 10px;
        }
      }
    }
  }
  button{
    height: 30px;
    width: 60px;
  }
}
</style>